<template>
    <layout :config="navConfig">
        <template #default>
            <div class="login-logo">
                <img src="../assets/img/SD-01.png" style="width: 100px;height: 100px">
               </div>
            <div class="login-input-item" v-for="$item in formData" :key="$item.label">
                <i :class="['iconfont',$item.icon]"></i>
                <input :type="$item.type" :placeholder="'请输入'+$item.label" v-model="$item.value">
            </div>
            <div class="login-forgot">
                <i class="iconfont icon-question-line"></i>
                <span>忘记密码</span>
            </div>
            <button class="login-button" @click="handleLogin">登录</button>

            <div class="login-warnText">
                还没账号?
                <router-link to="/register">去注册</router-link>
            </div>
        </template>
    </layout>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import {INavigation} from "../types";
    import {Toast} from 'mand-mobile'

    @Component({
        name: "Login"
    })
    export default class extends Vue {
        navConfig: INavigation = {
            text: "登录",
            isShowLeftArrow: false
        };

        formData = [
            {
                label: "手机号",
                type: "tel",
                icon: "icon-smartphone-line",
                value: ""
            },
            {
                label: "密码",
                type: "password",
                icon: "icon-lock-password-line",
                value: ""
            }
        ];

        // 登录
        handleLogin() {
            if (this.formData[0].value == "") {
                Toast.info("请输入手机号！");
                return;
            }
            if (this.formData[1].value == "") {
                Toast.info("请输入密码！");
                return;
            }
            this.$api.login({
                phone: this.formData[0].value,
                pass: this.formData[1].value
            }).then(res => {

                 if (res.success == 200) {
                     localStorage.setItem('users1', JSON.stringify(res.data));
                     let usera= JSON.parse(localStorage.getItem('users1'));

                     console.log(usera.id);

                     this.$router.push('/')
                } else {
                    Toast.info(res.data.msg)

                }
            }).catch(res => {
                Toast.info("请求失败！");
            })


        }
    }
</script>
<style lang="scss">
    @import "../assets/styles/login.scss";
</style>

